<template>
  <div>
    <el-form :inline="true"
             :model="condition"
             class="search-form"
             slot="search"
             label-width="70px">
      <el-row>
        <!-- <el-col :span="7">
          <el-form-item label="货物种类">
            <auto-cargo searchName="cargoTypeName"
                        v-model="filterText"
                        @select="v=>condition['search_LIKE_cargoTypeName']=v"
                        type="name"></auto-cargo>
          </el-form-item>
        </el-col> -->
        <el-col :span="7" class="search-width4">
          <el-form-item label="品 名">
            <auto-cargo searchName="cargoName"
                        v-model="filterText"
                        @select="v=>condition['search_LIKE_cargoName']=v"
                        type="name"></auto-cargo>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="loadTree">查 询</el-button>
          <el-button formVisible="true"
                     type="primary"
                     icon="el-icon-plus"
                     @click="handleDialogFormOpen(false)"
                     v-if="power('WPTMGR_BASEMGR_PORT:ADD')">
            新增
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="4" class="search-width4">
        <!-- 树形菜单 -->
        <el-tree :data="treeData"
                 :props="defaultProps"
                 :filter-node-method="filterNode"
                 ref="tree"
                 @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="19">
        <form>
          <fieldset>
            <legend>货物详情列表</legend>
            <br />
            <el-table slot="list"
                      :data="thingsData"
                      border
                      max-height="500">
              <el-table-column label="序号"
                               type="index"
                               width="50"></el-table-column>
              <el-table-column prop="normOne"
                               label="规格1"
                               min-width="120"></el-table-column>
              <el-table-column prop="normTwo"
                               label="规格2"
                               min-width="120"></el-table-column>
              <el-table-column prop="normThree"
                               label="规格3"
                               min-width="120"></el-table-column>
              <el-table-column prop="material"
                               label="材质"
                               min-width="120"></el-table-column>
              <el-table-column prop="manageWayDesc"
                               label="管理方式"
                               min-width="120"></el-table-column>
              <el-table-column prop="measureWayDesc"
                               label="计量方式"
                               min-width="120"></el-table-column>
              <el-table-column prop="madeBy"
                               label="生产厂家"
                               min-width="120"></el-table-column>
              <el-table-column prop="valid"
                               label="是否有效"
                               min-width="120">
                <template slot-scope="scope">
                  {{ scope.row.valid | _filterTrueOrFalse }}
                </template></el-table-column>
              <el-table-column prop="referenceWeight"
                               label="参考重量（吨/件）"
                               min-width="180"></el-table-column>
              <el-table-column fixed="right"
                               align="center"
                               label="操作"
                               width="140">
                <template slot-scope="scope">
                  <el-button size="small"
                             type="text"
                             @click="editDialogFormOpen(scope.row)">
                    编辑
                  </el-button>
                  <el-button type="text"
                             class="danger"
                             size="small"
                             @click="handleRemove(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </fieldset>
        </form>
      </el-col>
    </el-row>
    <thing-attribute-form ref="thingAttributeForm"
                          @load="clickNode"></thing-attribute-form>
    <edit-thing-form ref="editThingForm"
                     @load="clickNode"></edit-thing-form>
  </div>
</template>

<script>
import { getCargoNameList } from '@/api/baseResource/baseResource' //货物种类和品名的下拉菜单
import { getThingsList, deleteThings } from '@/api/things/things' //货物列表
import { companyNature, customType } from '@/assets/dict'
import { MessageBox } from 'element-ui'
import autoCargo from '@/components/autocomplete/autoCargo'
import thingAttributeForm from './thingAttributeForm'
import editThingForm from './editThingForm'

export default {
  name: 'thingAttribute',
  components: { autoCargo, thingAttributeForm, editThingForm },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, // 查询条件
      thingsData: [],
      // 树形数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      goodsType: [],
      filterText: ''
    }
  },
  mounted() {
    // 加载树形菜单
    this.loadTree()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        typeId: '',
        typeName: '',
        cargos: [
          {
            sortNo: 1,
            name: '',
            code: '',
            ifNotStandard: '',
            normOne: '',
            normTwo: '',
            normThree: '',
            normStr: '',
            material: '',
            madeBy: '',
            manageWay: '',
            manageWayDesc: '',
            valid: '',
            referenceWeight: '',
            remark: ''
          }
        ]
      }
    },
    // 加载树形菜单
    loadTree() {
      getCargoNameList().then(res => {
        this.goodsType = res.data.aaData
        let data = res.data.aaData
        for (let i = 0; i < data.length; i++) {
          let noData = true
          for (let j = 0; j < this.treeData.length; j++) {
            if (data[i].cargoTypeName === this.treeData[j].label) {
              this.treeData[j].children.push({
                label: data[i].cargoName,
                cargoCode: data[i].cargoCode
              })
              noData = false
              break
            }
          }
          if (noData) {
            this.treeData.push({
              label: data[i].cargoTypeName,
              cargoTypeCode: data[i].cargoTypeCode,
              children: [
                {
                  label: data[i].cargoName,
                  cargoCode: data[i].cargoCode
                }
              ]
            })
          }
        }
        return false
      })
    },
    // 树形菜单
    handleNodeClick(data) {
      if (data.cargoCode) {
        getThingsList({
          search_EQ_orgId: this.form.orgId,
          search_EQ_cargoCode: data.cargoCode
        }).then(res => {
          this.thingsData = res.data.aaData
        })
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleDialogFormOpen(bool, item) {
      if (bool) {
        //给子组件传递id值
        this.$refs.thingAttributeForm.getId(item.id)
        this.$refs.thingAttributeForm.form.cargos = []
        this.$refs.thingAttributeForm.form.cargos.push(item)
        this.$refs.thingAttributeForm.form.cargoTypeCode = item.cargoTypeCode
        this.$refs.thingAttributeForm.isEdit = true
        this.$refs.thingAttributeForm.dialogForm = true
      } else {
        this.$refs.thingAttributeForm.dialogForm = true
      }
    },
    editDialogFormOpen(item) {
      this.$refs.editThingForm.form = item
      this.$refs.editThingForm.dialogForm = true
    },
    // 通过ID删除
    handleRemove(item) {
      MessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteThings(item.id).then(res => {
          this.$message({
            message: `删除成功!`,
            type: 'success'
          })
          if (item.code) {
            getThingsList({
              search_EQ_orgId: this.form.orgId,
              search_EQ_code: item.code
            }).then(res => {
              this.thingsData = res.data.aaData
            })
          }
        })
      })
    },
    clickNode(val) {
      if (val) {
        getThingsList({
          search_EQ_orgId: this.form.orgId,
          search_EQ_code: val
        }).then(res => {
          this.thingsData = res.data.aaData
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
